/**
 * Created by zhaobo on 2016/12/23.
 */
import React, {Component} from "react";
import {ScrollView, StyleSheet, Platform} from "react-native";
import {Button, ButtonGroup} from "react-native-elements";
// 颜色
import socialColors from './config/socialColors'
import colors from "./config/colors";
import fonts from "./config/fonts";
let styles = {};
const log = () => {
  console.log('hello!')
}

export default class AllElements extends Component {
  constructor() {
    super()
    this.state = {
      selectedIndex: 0
    }
    this.updateIndex = this.updateIndex.bind(this)
  }

  updateIndex(selectedIndex) {
    this.setState({selectedIndex})
  }

  render() {
    const buttons = ['Button1', 'Button2']
    const {selectedIndex} = this.state
    return (
      <ScrollView>
        <ButtonGroup
          textStyle={{fontSize: 13}}
          onPress={this.updateIndex}
          selectedIndex={selectedIndex}
          selectedBackgroundColor={'#999999'}// 点击选择后颜色
          underlayColor={'#999999'}// 点击颜色
          buttons={buttons}/>
        <Button
          loading={true}
          title='BUTTON'
          backgroundColor={socialColors.facebook}
          underlayColor={'#999999'}// 点击颜色
          onPress={() => log()}
          buttonStyle={styles.button}/>
        <Button
          raised
          icon={{name: 'cached'}}
          buttonStyle={styles.button}
          title='BUTTON WITH ICON'/>
        <Button
          large
          iconRight
          icon={{name: 'code'}}
          buttonStyle={styles.button}
          title='LARGE WITH RIGHT ICON'/>
        <Button
          large
          icon={{name: 'envira', type: 'font-awesome',color:socialColors.tumblr}}
          buttonStyle={styles.button}
          title='LARGE WITH RIGHT ICON'/>
        <Button
          large
          icon={{name: 'squirrel', type: 'octicon'}}
          buttonStyle={styles.button}
          title='OCTICON'/>
      </ScrollView>
    );
  }
}

styles = StyleSheet.create({
  container: {
    flex: 1,
    margin: 15
  },
  heading: {
    color: 'white',
    marginTop: 10,
    fontSize: 22
  },
  hero: {
    marginTop: 60,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 40,
    backgroundColor: colors.primary2
  },
  titleContainer: {},
  button: {
    marginTop: 15
  },
  title: {
    textAlign: 'center',
    color: colors.grey2,
    ...Platform.select({
      ios: {
        fontFamily: fonts.ios.black
      }
    })
  }
})